<template>
    <div class="banner">
        <div class="swiper-container swiper-banner">
            <div class="swiper-wrapper">
                <div
                    class="swiper-slide"
                    v-for="(slide, index) in slides"
                    :key="index"
                    :style="{ backgroundImage: `url(${slide.image})` }"
                ></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

const slides = [
    {
        image: require('@/assets/imgs/221215022015_6786.jpg'),
    },
    {
        image: require('@/assets/imgs/221215022031_5596.jpg'),
    },
    {
        image: require('@/assets/imgs/221215010045_9581.jpg'),
    },
]

const bannerSwiper = ref(null)

onMounted(() => {
    bannerSwiper.value = new Swiper('.swiper-banner', {
        autoplay: 3000,
        loop: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
    })
})
</script>
<style lang="scss" scoped>
.swiper-container {
    width: 100%;
    height: 525px;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    height: 525px;
}
</style>
